<template>
  <!-- <van-search disabled v-model="value" placeholder="请输入搜索关键词" to="/search"/> -->
  <MyHead title="首页" :noback="true"></MyHead>
  <!-- 1111111111 -->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>
  <!-- 222222222222222 -->
  <van-grid square>
    <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
  </van-grid>
  <!-- 33333333333333 -->
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <van-card v-for="item in productList" :price="item.originprice" :desc="item.desc" :title="item.proname"
      :thumb="item.img4" @click="ondetaile(item.proid)" />
  </van-list>
  <!--  4444444444444444    -->
  <van-tabbar v-model="active">
    <van-tabbar-item name="home" icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item name="category" icon="search" to="/category">分类</van-tabbar-item>
    <van-tabbar-item name="car" icon="shopping-cart" to="/car">购物车</van-tabbar-item>
    <van-tabbar-item name="center" icon="manager" to="/center">个人中心</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useProductStore } from '../store/product'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
// import { banner } from '../api/banner'
const active = ref('home')
const store = useProductStore();
const { productList } = storeToRefs(store)
console.log(productList)

const router = useRouter();
const loading = ref(false);
const finished = ref(false);
const page = ref(1)
const limitNum = 10
const images = ['https://tse1-mm.cn.bing.net/th/id/OIP-C.YPy7UzMUxjvCvn1ixsIz9AHaEK?w=332&h=186&c=7&r=0&o=5&pid=1.7',
  'https://tse3-mm.cn.bing.net/th/id/OIP-C.a2Ma-RGy6E3MhYmoajg_HQHaEV?w=317&h=186&c=7&r=0&o=5&pid=1.7',
  '',
  'https://tse2-mm.cn.bing.net/th/id/OIP-C.pkrXMZ46zSQMJCb5JXOtYQHaEo?w=290&h=181&c=7&r=0&o=5&pid=1.7',
]

const ondetaile = (id: string) => {

  router.push(`/detaile/${id}`)
}

onMounted(() => {
  store.fetchList(1)
})

const onLoad = async () => {
  const list = await store.fetchList(page.value++)
  finished.value = list.length === 0
  loading.value = false

}





</script>

<style>
.van-swipe-item {
  font-size: 20px;
  height: 200px;
}

.van-swipe-item img {
  width: 100%;
  height: 200px;
}

.van-row {
  justify-content: space-around;
  margin-top: 10px;
  margin-bottom: 50px;
  background-color: rgb(146, 146, 146);
}

.van-col {
  margin-top: 9px;
  background-color: white;
}

.van-col img {

  height: 160px;
  width: 100%;
}
</style>